
<template>
  <div class="app">
    <h1>Vue Test App with Element Plus</h1>
    
    
    <!-- Element Plus 卡片示例 -->
    <div
      class="card"
      style="border: 1px solid #e4e7ed; width: 400px; margin: 0 auto;"
    >
      <el-card
        v-loading.fullscreen="{ show: loading, background: 'rgba(0, 0, 0, 0.7)', text: '玩命加载中...' }"
        class="demo-card"
        shadow="hover"
      >
        <template #header>
          <div class="card-header">
            <span>Element Plus 卡片</span>
            <el-button
              type="primary"
              size="small"
            >
              操作按钮
            </el-button>
          </div>
        </template>
        <div>
          <p>这是一个使用 Element Plus 卡片组件的示例内容。</p>
          <p>Element Plus 是 Vue 3 的企业级 UI 组件库。</p>
        </div>
      </el-card>
    </div>

    <div
      class="pad"
      style="height: 1200px;"
    />
  </div>
</template>


<script setup lang="ts">
import { ref } from 'vue';
const loading = ref(true);

setTimeout(() => {
  console.debug('-------------------------1秒后，loading 状态变更为 false-------------------------');
  loading.value = false;
}, 1000);
// 响应式变量控制消息显示
const showMessage = ref(true);

// 切换消息显示状态的函数
function toggleMessage() {
  showMessage.value = !showMessage.value;
}
</script>

<style scoped>
.app {
  text-align: center;
  margin: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.button-group {
  margin: 2rem 0;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.demo-card {
  margin: 2rem 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-group {
  margin: 2rem 0;
  display: flex;
  gap: 20px;
  justify-content: center;
}

.v-if-demo {
  margin: 2rem 0;
}

.message-card {
  margin-top: 1rem;
}
</style>
